<template>
	<view >
		<view class="bigbox">
			<!--  -->
			<view class="box">
				<view  v-for="(item,index) in head" @click="qh(index,item)">
					<image :src="item.img" mode=""></image>
					<view :class="inx==index?'active':''">{{item.name}}</view>
				</view>
			</view>
			<!--  -->
			<view class="line"></view>
			<view class="box1">
				<view>
					<view> 本月回款总金额</view>
					<view>￥123456</view>
				</view>
				<view>
					<view>当前案件逾期</view>
					<view>￥123456</view>
				</view>
				<view>
					<view> 本月逾期总</view>
					<view>￥123456</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'active cur':''" v-for="(item,index) in arr" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
			<view class="qiun-charts" >
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchColumn"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts"  @touchstart="touchColumn"></canvas>
				<!--#endif-->
			</view>
			<view class="bigbox box3">
				<view class="box2">
					<view class="dian"></view>
					<view>三明13%￥123.34</view>
				</view>
				<view class="box2">
					<view class="dian"></view>
					<view>三明13%￥123.34</view>
				</view>
			</view>
		</view>
		<view class="box4">
			<view class="box4_1">
				<view class="box4_2" style="width: 10%;">排名</view>
				<view class="box4_2" style="width: 15%;">区域</view>
				<view class="box4_2">贷款余额</view>
				<view class="box4_2">待赔付金额</view>
				<view class="box4_2">不良占比率</view>
			</view>
			<view class="box4_3">
				<view class="box4_2" style="width: 10%;color: #E94515;">1</view>
				<view class="box4_2" style="width: 15%;">泉州</view>
				<view class="box4_2">123456</view>
				<view class="box4_2">123456</view>
				<view class="box4_2">50%</view>
			</view>
			<view class="box4_3">
				<view class="box4_2" style="width: 10%;color: #E94515;">1</view>
				<view class="box4_2" style="width: 15%;">泉州</view>
				<view class="box4_2">123456</view>
				<view class="box4_2">123456</view>
				<view class="box4_2">50%</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import uCharts from '../../component/u-charts/u-charts.js';
	import  { isJSON } from '../../common/checker.js';
	var _self;
	var canvaColumn=null;
	export default {
		data() {
			return {
				inx:0,
				head:[
					{
						name:'逾期管理',
						img:'../../static/85.png',
					},{
						name:'回款管理',
						img:'../../static/88.png',
					},{
						name:'待催收',
						img:'../../static/90.png',
					},{
						name:'待处置',
						img:'../../static/92.png',
					},
				],
				TabCur: 0,
				scrollLeft: 0,
				arr:['正常','M1','M2','M3','M3+'],
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:''
			}
		},
		onLoad:function(){
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			qh:function(index,item){
				this.inx = index
				if(item.name == '逾期管理'){
					this.head[0].img = '../../static/85.png'
					this.head[1].img = '../../static/88.png'
					this.head[2].img = '../../static/90.png'
					this.head[3].img = '../../static/92.png'
				}else if(item.name == '回款管理'){
					this.head[0].img = '../../static/86.png'
					this.head[1].img = '../../static/87.png'
					this.head[2].img = '../../static/90.png'
					this.head[3].img = '../../static/92.png'
				}else if(item.name == '待催收'){
					this.head[0].img = '../../static/86.png'
					this.head[1].img = '../../static/88.png'
					this.head[2].img = '../../static/89.png'
					this.head[3].img = '../../static/92.png'
				}else if(item.name == '待处置'){
					this.head[0].img = '../../static/86.png'
					this.head[1].img = '../../static/88.png'
					this.head[2].img = '../../static/90.png'
					this.head[3].img = '../../static/91.png'
				}
				
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let ColumnMeter={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						ColumnMeter.categories=res.data.data.ColumnMeter.categories;
						//这里的series数据,如果为Meter，series[0]定义为外层数据，series[1]定义为内层数据
						ColumnMeter.series=res.data.data.ColumnMeter.series;
						_self.textarea = JSON.stringify(res.data.data.ColumnMeter);
						_self.showColumnMeter("canvasColumnMeter",ColumnMeter);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showColumnMeter(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					rotate:false,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'meter',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
							meter:{
								//这个是外层边框的宽度
								border:4,
								//这个是内部填充颜色
								fillColor:'#E5FDC3'
							}
						}
					  }
				});
				
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaColumn.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}else{
					uni.showToast({
						title:'数据格式错误',
						image:'../../../static/images/alert-warning.png'
					})
				}
			}
		}
	}
</script>

<style>
	
	
	.active{
		color: #4185F5 !important;
	}
	.box4_3{
		height: 100rpx;
		/* background-color: rgba(58, 56, 81, 1); */
		text-align: center;
		border: 1px solid rgba(34, 33, 58, 1);
		border-top: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.box4_2{
		width: 25%;
		white-space: nowrap;
		/* border: 1px solid red; */
		text-align: center;
	}
	.box4_1{
		height: 100rpx;
		background-color: rgba(58, 56, 81, 1);
		text-align: center;
		border: 1px solid rgba(34, 33, 58, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FFFFFF;
	}
	.box4{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.box3{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.box2{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.qiun-charts {
		width: 500rpx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.active{
		color: #06224B;
	}
	.line{
		height: 24rpx;
		border-radius: 10rpx;
		background-color: rgba(245, 245, 245, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(255, 255, 255, 0);
		margin: 20rpx 0;
	}
	.box1>view{
		width: 32%;
		height: 100%;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		border: 1px solid #3A3851;
		line-height: 60rpx;
		color: rgba(6, 34, 75, 1);
		font-size: 24rpx;
		font-family: SourceHanSansSC-bold;
		border-radius: 10rpx;
	}
	.box1{
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}
	.box>view>image{
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}
	.box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
